<template>
  <div class="threebox">
    <div class="twobox">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>待审核事件</span>
        <i class="el-icon-refresh refresh" @click="refresh('pending')"></i>
      </div>
      <div class="index_two_body">
        <div class="index_two_item" @click="$router.push('/index/user/withdraw_ye?action=0')">
          <div>
            <div>
              <p>{{ three1["提现"] }}</p>
              <p>提现</p>
            </div>
            <img src="././../../../assets/img/index/two1.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/order/returned')">
          <div>
            <div>
              <p>{{ three1["退货"] }}</p>
              <p>退货</p>
            </div>
            <img src="././../../../assets/img/index/two2.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/user/user_complaint')">
          <div>
            <div>
              <p>{{ three1["留言"] }}</p>
              <p>留言</p>
            </div>
            <img src="././../../../assets/img/index/two3.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/shop/review')">
          <div>
            <div>
              <p>{{ three1["评价"] }}</p>
              <p>评价</p>
            </div>
            <img src="././../../../assets/img/index/two4.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="twobox" v-if="is_open.shbxt && is_open.shbxt.is_open == '1'">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>商户数据中心</span>
        <i class="el-icon-refresh refresh" @click="refresh('supplier')"></i>
      </div>
      <div class="index_two_body">
        <div class="index_two_item" @click="$router.push('/index/user/supplier')">
          <div>
            <div>
              <p>{{ three2["总商户数"] }}</p>
              <p>总商户数</p>
            </div>
            <img src="././../../../assets/img/index/two1.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/supplier/supplierorder')">
          <div>
            <div>
              <p>{{ three2["已结货款"] }}</p>
              <p>已结货款</p>
            </div>
            <img src="././../../../assets/img/index/two2.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/supplier/supplierorder')">
          <div>
            <div>
              <p>{{ three2["未结货款"] }}</p>
              <p>未结货款</p>
            </div>
            <img src="././../../../assets/img/index/two3.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/supplier/supplierpromotion')">
          <div>
            <div>
              <p>{{ three2["商户促销申请"] }}</p>
              <p>商户促销申请</p>
            </div>
            <img src="././../../../assets/img/index/two4.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/supplier/suppliershops?page=1&is_check=0')">
          <div>
            <div>
              <p>{{ three2["待审核商品"] }}</p>
              <p>待审核商品</p>
            </div>
            <img src="././../../../assets/img/index/two4.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/user/checksupplier')">
          <div>
            <div>
              <p>{{ three2["待审核商户"] }}</p>
              <p>待审核商户</p>
            </div>
            <img src="././../../../assets/img/index/two1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="twobox" v-if="is_open.gbfx && is_open.gbfx.is_open == 1">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>代理商数据中心</span>
        <i class="el-icon-refresh refresh" @click="refresh('agent')"></i>
      </div>
      <div class="index_two_body">
        <div class="index_two_item" @click="$router.push('/index/user/agent')">
          <div>
            <div>
              <p>{{ three3["总代理人数"] }}</p>
              <p>总代理人数</p>
            </div>
            <img src="././../../../assets/img/index/two1.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/user/money')">
          <div>
            <div>
              <p>{{ three3["代理总分润"] }}</p>
              <p>代理总分润</p>
            </div>
            <img src="././../../../assets/img/index/two2.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/user/checkagent')">
          <div>
            <div>
              <p>{{ three3["待审核代理"] }}</p>
              <p>待审核代理</p>
            </div>
            <img src="././../../../assets/img/index/two3.png" alt="" />
          </div>
        </div>
        <div class="index_two_item" @click="$router.push('/index/user/money')">
          <div>
            <div>
              <p style="font-size: 16px">{{ three3["业绩第一区域"] }}</p>
              <p>业绩第一区域</p>
            </div>
            <img src="././../../../assets/img/index/two4.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <el-row :span="24" :gutter="20" style="width: 100%">
      <el-col :span="3" v-for="(item, i) in data" :key="i">
        <div class="index_three">
          <img :src="require(`./../../../assets/img/index/three${(i % 7) + 1}.png`)" alt="" />
          <p>{{ item[1] }}</p>
          <p>{{ item[0] }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_open: (state) => state.plugin,
    }),
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    three1: {
      type: [Object, Boolean],
    },
    three2: {
      type: [Object, Boolean],
    },
    three3: {
      type: [Object, Boolean],
    },
  },
  components: {},
  methods: {
    refresh(type) {
      this.$bus.$emit("refresh", type);
      this.$bus.$emit("refresh", "made");
    },
  },
};
</script>
<style lang="less" scoped>
.threebox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.index_three {
  // width: 12%;
  height: 126px;
  padding-right: 10px;
  margin-bottom: 15px;
  // padding: 0 46px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 5px 20px #e4e4e4;
  > img {
    width: 40px;
    height: 40px;
  }
  > p:nth-of-type(1) {
    font-size: 28px;
    font-weight: 400;
    color: #515a6e;
  }
  > p:nth-of-type(2) {
    font-size: 15px;
    color: #798090;
  }
}
.index_three:last-of-type {
  margin-right: auto;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: red;
}

.twobox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 5px 20px #e4e4e4;
  border-radius: 5px;
  overflow: auto;
  margin-bottom: 25px;
}

.index_two_body {
  width: 100%;
  padding: 15px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  .index_two_item:not(:last-child) {
    margin-right: 15px;
  }
  .index_two_item {
    flex: 1;
    height: 110px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: #fbfbfb;
    padding: 0 15px;
    > div {
      width: 100%;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border-bottom: 1px solid #e8eaec;
      > img {
        width: 45px;
      }
      > div {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
        > p:nth-of-type(1) {
          font-size: 30px;
          font-weight: 400;
          color: #515a6e;
          line-height: 50px;
        }
        > p:nth-of-type(2) {
          font-size: 15px;
          color: #212121;
        }
      }
    }
    > p {
      width: 100%;
      height: 40px;

      font-size: 16px;
      color: #8c8c8c;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > span {
        font-size: 15px;
        margin-right: auto;
      }
    }
  }
}
</style>
